<!--
  @Descripttion: 功能卡片
  @Author：yejianbo
  @Date：2023年02月16日 03:48:00
-->
<template>
  <section class="card-com" :class="{'offline': !online}" @click="() => {
    handleClick && handleClick()
  }">
    <slot></slot>
    <p class="text">{{ text }}</p>
  </section>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {
    text: {
      type: String,
      require: true,
    },
    online: {
        type: Boolean,
        require: false,
        default: true
    },
    handleClick: {
        type: Function,
        require: false,
        default: () => {}
    }
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.card-com {
  position: relative;
  width: 100%;
  height: 152px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background: #F3F7FE;
  border: 2px solid #C7E0FF;
  border-radius: 10px;
  margin-bottom: 48px;
  cursor: pointer;
  .text {
    margin-top: 14px;
    font-size: 18px;
    font-family: "Alibaba PuHuiTi 2";
    color: #056de8;
    line-height: 31px;
  }
}
.offline {
  background: #f1f1f1;
  border: 2px solid #f1f1f1;
  cursor: not-allowed;
  .text {
    color:#999;
  }
}
</style>
